{% extends "program.html.twig" %}

{% block program %}
    <div class="row">
        <div class="col-xs-12">
            <h4 class="text-center">{{ pageheader }}</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-10 col-xs-offset-1 col-lg-6 col-lg-offset-3">
            <form class="form-horizontal" method="post" action="{{ urlFor('create-event') }}">
                <div class="form-group">
                    <label for="event-day">Day</label>
                    <select class="form-control input-lg" name="event-day" required>
                        {% for day in days|keys %}
                            <option value="{{ day }}">{{ day }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="event-start-time">Start time</label>
                    <input type="text" class="form-control input-lg" name="event-start-time" required/>
                </div>
                <div class="form-group">
                    <label for="event-end-time">End time (not required)</label>
                    <input type="text" class="form-control input-lg" name="event-end-time" />
                </div>
                <div class="form-group">
                    <label for="event-description">Description</label>
                    <input type="text" class="form-control input-lg" name="event-description" maxlength="256" />
                </div>
                <div class="form-group">
                    <label for="event-details">Details (shown in race facts)</label>
                    <textarea type="text" class="form-control input-lg" name="event-details" rows="5" maxlength="500"></textarea>
                </div>
                <div class="form-group">
                    <label for="event-category">Category</label>
                    <select class="form-control input-lg" name="event-category" required>
                        {% for category in categories|keys %}
                            <option value="{{ category }}">{{ category }}</option>
                        {% endfor %}
                    </select>
                </div>    
                <div class="form-group">
                    <label for="event-venue">Venue</label>
                    <select class="form-control input-lg" name="event-venue" required>
                        {% for venue in venues %}
                            <option value="{{ venue.venue_id }}">{{ venue.venue_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <div class="col-xs-6 col-xs-offset-3 col-lg-4 col-lg-offset-4">
                        <button type="submit" class="width-35 text-center btn btn-sm btn-default btn-block">
                            Create event
                        </button>
                    </div>
                </div>

                {% if error is not empty %}
                    <h3 class="text-center"><span class="label label-danger">{{ error }}</span></h3>
                {% endif %}
            </form>
        </div>
    </div>
{% endblock %}